<template>
	<view class="container">
		<view style="width: 100%; text-align: center;height: 90upx;	position: fixed;z-index: 99; ">
			<scroll-view id="nav-bar" class="nav-bar" scroll-x>
				<view class="nav-item" :class="{'current': deptItem.deptIndex === tabCurrentIndex}" @click="changeTab(deptItem.deptIndex)"
				 v-for="deptItem in deptTypeList" :key="deptItem.deptIndex">
					{{deptItem.deptName}}
				</view>
			</scroll-view>
		</view>
		<scroll-view class="panel-scroll-box" scroll-y>
			<swiper class="swiper-box" :duration="300" :current="tabCurrentIndex" @change="changeTabSwiper">
				<swiper-item v-for="deptItem in deptTypeList" :key="deptItem.deptIndex">
					<scroll-view scroll-y style="height: 100%;">
						<view class="record-box">
							<empty v-if="dataList.length == 0"></empty>
							<uni-card v-for="(dataItem,dataIndex) in dataList" :key="dataIndex" v-else>
								<view slot="title" style="display: flex;flex-direction: row;line-height: 80upx;border-bottom: 1px solid #edeef0;">
									<view style="padding: 0 20upx;font-size: 20upx;background-color: #ffaa00;line-height:40upx;height: 40upx;border-radius: 10upx;margin-top: 20upx;color:#FFF">
										{{serviceTypeName(dataItem.serverType)}}
									</view>
									<view style="margin-left: 20upx;font-weight: bold;">
										{{dataItem.name}}
									</view>
									<view style="margin-left: auto;color:rgb(164, 167, 173)">
										<uni-icons type="map-pin-ellipse" size="14" style="margin-right: 6upx;"></uni-icons>
										<span style="font-size: 22upx;">{{dataItem.distance}}m</span>
									</view>
								</view>
								<view style="font-size: 24upx;min-height: 100upx;">
									{{dataItem.address}}
								</view>
								<view style="font-size: 24upx;color:rgb(164, 167, 173);margin-top: 20upx;">
									营业时间：{{dataItem.serviceTime}}
								</view>
							</uni-card>
						</view>
					</scroll-view>
				</swiper-item>
			</swiper>
		</scroll-view>
	</view>
</template>

<script>
	import empty from '@/components/empty.vue'
	import uniCard from '@/components/uni-card/uni-card.vue'
	export default {
		data() {
			return {
				latitude: 30.6565202250, //默认天府广场, 如果获取当前位置成功则替换为当前位置
				longitude: 104.0659332275,
				tabCurrentIndex: 0,
				dataList: [],
				deptTypeList: [{
					deptName: "顺丰快递",
					deptNumber: "SHUNFENG",
					deptIndex: 0
				}, {
					deptName: "圆通快递",
					deptNumber: "YUANTONG",
					deptIndex: 1
				}]
			}
		},
		onLoad() {
			this.loadLocation()
			// this.initDataList()
		},
		components: {
			empty,
			uniCard
		},
		computed: {
			serviceTypeName() {
				return (serviceTypeCode) => {
					let serviceTypeName = "";
					switch (serviceTypeCode) {
						case "1":
							serviceTypeName = "自营服务点";
							break;
						case "2":
							serviceTypeName = "合作商家店";
							break;
						case "3":
							serviceTypeName = "顺丰优选";
							break;
						case "4":
							serviceTypeName = "顺丰站";
							break;
						case "5":
							serviceTypeName = "丰巢柜";
							break;
					}
					return serviceTypeName;
				}
			}
		},
		methods: {
			loadLocation() {
				uni.getLocation({
					type: 'gcj02',
					success: (res) => {
						console.log('当前位置的经度：' + res.longitude);
						console.log('当前位置的纬度：' + res.latitude);
						this.latitude = res.latitude;
						this.longitude = res.longitude;
					},
					complete: (res) => {
						console.log(res)
						this.initDataList()
					}
				})
			},
			changeTab(index) {
				this.tabCurrentIndex = index;
			},
			changeTabSwiper(e) {
				this.tabCurrentIndex = e.detail.current;
				this.dataList = [];
				this.initDataList()
			},
			initDataList() {
				let params = {
					expressType: this.deptTypeList[this.tabCurrentIndex].deptNumber,
					longitude: this.longitude,
					latitude: this.latitude
				}
				this.$api.request.queryExpressService(params, res => {
					if (res.code == 200) {
						this.dataList = res.data
					}
				})
			}
		}
	}
</script>

<style scoped lang='scss'>
	page {
		background: #F8F8F8;
	}

	.container {}

	/* 顶部tabbar */
	.nav-bar {
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: center;
		position: relative;
		height: 90upx;
		white-space: nowrap;
		box-shadow: 0 2upx 8upx rgba(0, 0, 0, .06);
		background-color: #fff;

		.nav-item {
			display: inline-block;
			padding: 0 40upx;
			height: 90upx;
			text-align: center;
			line-height: 90upx;
			font-size: 30upx;
			color: #303133;
			position: relative;

			&:after {
				content: '';
				width: 0;
				height: 0;
				border-bottom: 4upx solid #3E9CF9;
				position: absolute;
				left: 50%;
				bottom: 0;
				transform: translateX(-50%);
				transition: .3s;
			}
		}

		.current {
			color: #3E9CF9;

			&:after {
				width: 50%;
			}
		}
	}

	.panel-scroll-box {
		height: calc(100% - 10upx);
		position: absolute;
		top: 100upx;
		z-index: 10;
	}

	.swiper-box {
		height: 100%;
	}

	.record-box {
		height: 100%;
	}
</style>
